<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>登录</title>
    <link rel="stylesheet" href="/css/font.css">
    <link rel="stylesheet" href="/css/xadmin.css">
    <script type="text/javascript" src="https://cdn.bootcss.com/jquery/3.2.1/jquery.min.js"></script>
    <script src="/lib/layui/layui.js" charset="utf-8"></script>
    <script type="text/javascript" src="/js/xadmin.js"></script>
</head>
<body class="login-bg">
<div class="login">
    <div class="message" >用户登录</div>
    <div id="darkbannerwrap"></div>

  <!--  <h1>用户登录</h1>
        <form action="/login/loginform">
            <label>用户名：</label>
            <input type="text" name="userName">
            <label>密码：</label>
            <input type="password" name="userPwd">
            <input type="submit" value="登录">
            <span th:text="${info}" style="color:red"></span>
        </form>-->
    <form method="post" class="layui-form" id="userForm">
        <input name="userName" placeholder="用户名"  type="text" lay-verify="required" class="layui-input" >
        <hr class="hr15">
        <input name="userPwd" placeholder="密码"  type="password" lay-verify="required" class="layui-input" >
        <hr class="hr15">

        <div class="layui-form-item">
            <div>
                <label for="loginna" class="layui-form-label" >
                    <span class="x-red"></span>选择登录角色
                </label>
                <div class="layui-input-inline"   id="loginna" name="loginna"   >
                    <input type="radio" name="loginna"  value="用户" title="用户"  checked="" >
                    <input type="radio" name="loginna"   value="经理" title="经理"  >

                </div>
            </div>
        </div>

        <button class="layui-btn layui-btn-normal" type="submit" lay-submit lay-filter="login">登录</button>

        <a href="/login/zhucepage" 	class="layui-btn layui-btn-normal" >用户注册</a>

        <button class="layui-btn layui-btn-normal" type="button" onclick="ddd(1)">邮箱登录</button>
        <span id="info" style="color:red"></span>
    </form>
    <form method="post" class="layui-form" style="display: none" id="emailForm">
        <input name="email" placeholder="邮箱"  type="text" lay-verify="email" class="layui-input" >
        <hr class="hr15">
        <input name="code" placeholder="验证码"  type="text"  class="layui-input" >
        <button class="layui-btn layui-btn-normal" style="margin-top: 20px" type="submit" lay-submit lay-filter="sendCode">发送验证码</button>
        <hr class="hr15">



        <button class="layui-btn layui-btn-normal" type="submit" lay-submit lay-filter="emaillogin">登录</button>

        <a href="/login/zhucepage" 	class="layui-btn layui-btn-normal" >注册页面</a>

        <button class="layui-btn layui-btn-normal" type="button" onclick="ddd(0)">用户登录</button>
        <span id="e" style="color:red"></span>
    </form>
</div>


    <!--<h1>邮箱登录</h1>
        <label>邮箱：</label>
        <input type="text" name="email" id="email">
        <label>验证码：</label>
        <input type="text" name="code" id="code">
        <input type="button" value="发送验证" onclick="send()">
        <input type="button" value="登录" onclick="emaillogin()">

        <span id="e" style="color:red"></span>-->
</body>
</html>
<script>
    //邮箱用户登录和用户登录表单切换
    function ddd(num){
        if(num==1){
            //显示邮箱登录表单
            $("#emailForm").show();
            //影藏用户登录表单
            $("#userForm").hide();
            //更该标题
            $(".message").text("邮箱登录");

        }else{
            $("#userForm").show();
            //影藏用户登录表单
            $("#emailForm").hide();
            //更该标题
            $(".message").text("用户登录");
        }

    }
    $(function () {
        layui.use('form', function(){
            var form = layui.form;
            var lo=$("#loginna").val();
            //监听提交
            //用户登录
            form.on('submit(login)', function(data){
                // alert(888)

                console.log(data);
                //发送ajax请求
                $.ajax({
                    url:"/login/loginAjax",
                    type:"post",
                    data:data.field,
                    dataType:"json",//返回的数据类型
                    success:function (data) {
                        //定义{info:"sucess"}
                        $("#info").text(data.info);
                        if(data.info=="登录成功管理员")
                        {
                          window.location.href = "/managermanager-index";
                        }
                        else if(data.info=="登录成功经理"){
                            window.location.href = "/manager-index"
                        }
                        else if(data.info=="登录成功"){
                            window.location.href = "/user-index";
                        }
                        else
                        {
                            layer.alert("密码错误！");
                        }

                    }
                })
                return false;
            });
            //发送验证码
            form.on('submit(sendCode)', function(data){
                // alert(888)

                console.log(data);
                //发送ajax请求
                $.ajax({
                    url:"/login/sendEmail",
                    type:"post",
                    data:data.field,
                    dataType:"json",//返回的数据类型
                    success:function (data) {
                        //定义{info:"sucess"}
                        $("#e").text(data.info);
                    }
                })
                return false;
            });
            //邮件登录
            form.on('submit(emaillogin)', function(data){
                // alert(888)

                //验证邮箱密码不能为空
                if(data.field.code==""){
                    layer.alert("邮箱验证码不能为空");
                    return false;
                }
                console.log(data);
                //发送ajax请求
                $.ajax({
                    url:"/login/emaillogin",
                    type:"post",
                    data:data.field,
                    dataType:"json",//返回的数据类型
                    success:function (data) {
                        //定义{info:"sucess"}
                        $("#e").text(data.info);
                        if(data.info=="邮箱登录成功")
                        {
                            window.location.href = "/user-index";
                        }
                    }
                })
                return false;
            });
        });
    })
    //定义一个登录函数
    function login() {
        //获取用户输入的用户名
        var name = $("#userName").val();
        //密码
        var pwd= $("#userPwd").val();
        //发送ajax请求
        $.ajax({
            url:"/login/loginAjax",
            type:"post",
            data:{"userName":name,"userPwd":pwd},
            dataType:"json",//返回的数据类型
            success:function (data) {
                //定义{info:"sucess"}
                    $("#info").text(data.info);
            }
        })
    }
    function send() {

        var email = $("#email").val();
        $.ajax({
            url:"/login/sendEmail",
            type:"post",
            data:{"email":email},
            dataType:"json",//返回的数据类型
            success:function (data) {
                //定义{info:"sucess"}
                $("#e").text(data.info);
            }
        })

    }
    function emaillogin() {


        //获取用户的验证码
        var code = $("#code").val();
        $.ajax({
            url:"/login/emaillogin",
            type:"post",
            data:{"code":code},
            dataType:"json",//返回的数据类型
            success:function (data) {
                //定义{info:"sucess"}
                $("#e").text(data.info);
            }
        })
    }
</script>